import React, { useEffect, useState } from 'react';
import { Table, Tag, Card, message } from 'antd';

import { getGoodsByPage, deleteGoods } from '../../apis/goods'

import './styleBox/goods.scss'

export default () => {
  const [list, setList] = useState([])

  const deleteGood = (gid) => {
    console.log("当前点击的商品id", gid);
    deleteGoods(gid)
      .then(data => {
        message.success('商品删除成功')
      })
      .catch(err => message.error('商品删除失败'))
  }

  const columns = [
    {
      title: '赛事标题',
      dataIndex: 'title',
      key: 'title',
      render: title => <a className='goodName'>{title}</a>,
      width: 500,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '赛事类型',
      dataIndex: 'event',
      key: 'event',
      render: event => <text className='price'>{event}</text>,
      width: 200,
      align: 'center',
    },
    {
      title: '封面',
      dataIndex: 'fengmian',
      key: 'fengmian',
      render: fengmian => <img className='good_img' src={fengmian} />,
      // width: 200,
      align: 'center',
    },
    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      // align: 'center',
      render: (text, record, index) => (
        <>
          <Tag className='tag' color='green'>编辑</Tag>
          <Tag className='tag' color='purple'>下架</Tag>
          <Tag className='tag' color='red' onClick={() => { deleteGood(record._id) }}>删除</Tag>
        </>
      )
    }
  ];

  const getData = async () => {
    // 声明新的 cloud 实例
    let c1 = new window.cloud.Cloud({
      // 必填，表示是未登录模式
      identityless: true,
      // 资源方 AppID 填自己的
      resourceAppid: 'wxeedf95a9015b2b59',
      // 资源方环境 ID	填自己的
      resourceEnv: 'caicren1-9ga67iu1c258fa35',
    })
    //初始化
    await c1.init()
    //初始化执行完再调用

    // 完成后正常使用资源方的已授权的云资源
    c1.callFunction({
      name: 'getListYes',    //调用的云函数名字
      success: res => {
        let tempData = res.result.data
        // console.log("tempData", tempData);
        setList(() => tempData.map(item => ({ ...item, key: item._id })))
      },
      fail(err) {
        console.log("callFunction err=", err);
      }
    })
  }

  useEffect(
    async () => {
      getData()
    },
    []
  )

  return (
    <Card title='赛事新闻管理'>
      <Table columns={columns} dataSource={list} pagination={{ pageSize: 4 }} />
    </Card>
  )
}